<template>
  <div class="home">
    <a-button type="primary" @click="add">改变</a-button>
    <router-link to="/about?qq=50">带参数跳转到about</router-link>
    <input v-model="v.a" />
    {{ v.a }}
    {{ v.b }}
    {{ qqq }}
    {{ num }}
    {{ v.c }}
    <p v-for="(n, i) in v.data" :key="i">{{ n }}</p>
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld :msg="v.d" @qwer="v.d = $event" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { useStore } from "vuex";
import {
  reactive,
  computed,
  watchEffect,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  watch,
  toRefs,
  getCurrentInstance,
} from "vue";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  setup(props, context) {
    const { proxy } = getCurrentInstance();
    console.log("创建");
    /*
    利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据不会影响到原始数据。
    ref的本质是拷贝，与原始数据没有引用关系

    ref和toRef的区别
  (1)ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
  (2)ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
  (3)toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性
  (3)toResf直接把参数的所有属性toRef一遍
    */
    const num = ref(100);
    num.value *= 3;
    console.log(num);
    const store = useStore();
    const qqq = computed(() => store.state.qqq);
    const v = reactive({
      a: 10,
      b: computed(() => v.a * 10),
      c: ref(20), //在reactive里面的数据不需要加value访问
      d: "欢迎来到vue3.0",
      data: ["q", "w"],
    });
    console.log(v.c);
    watch(num, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });
    watch(
      () => v.a,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      }
    );
    watch([num, () => v.a], (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });
    const stop = watchEffect(() => {
      console.log("watchEffect", v.a, num.value);
    });
    function add(e) {
      console.log(e);
      v.a += 2;
      num.value *= 2;
    }
    onBeforeMount(() => {
      proxy.$axios.get("/interface").then((res) => console.log(res));
    });
    onMounted(() => {
      console.log("渲染后");
    });
    onBeforeUpdate(() => {
      console.log("更新前");
    });
    onUpdated(() => {
      console.log("更新后");
    });
    onBeforeUnmount(() => {
      console.log("销毁前");
    });
    onUnmounted(() => {
      console.log("销毁后");
    });
    const refData = toRefs(v);
    return {
      ...refData,
      v,
      add,
      qqq,
      num,
    };
  },
};
</script>
